
<template>
  <div class="head-box">
    <div class="city" @click="address">西安</div>
    <div class="search">
       <img src="../assets/logo.png" class = "img" >
       <div id="xian"></div>
       <van-icon name="search" class="icon-0yuankanjia"/>
       <input type="text" class="search-input" placeholder="立柜式空调" @click = "leap">
    </div>
    <div class="login" @click = 'login'>{{msg}}</div>

  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
    name: 'head-vue',
    data(){
      return {
        msg:"登录"
      }
    },
    methods:{
      leap(){
        this.$router.push("/search")
      },
      login(){
        if(!localStorage.getItem("token")){
          this.$router.push("/reg")
        }else{
          Toast("您已登录，请勿重新登录！")
        }
      },
      address(){
        this.$router.push("/addresschoice")
      }
    },
    created(){
      //如果存在token则更改msg
      if(localStorage.getItem("token")){
        this.msg = "已登陆"
      }
    }

}
</script>

<style scoped>
 @import url(../assets/font_3678507_3jt1bn43255/iconfont.css);
 .head-box{
  background-color: #ff976a;
  height: 2.5rem;
  display: flex;
  align-items: center;
  color: white;
  line-height: 2.5rem;
  font-size: .7rem;
}
.head-box div{
  height: 100%;
}
.search{
  flex: 1;
  position: relative;
  
}
.city,.login{
  width: 60px;
  text-align: center;
}
.search-input{
  width: 85%;
  height: 1.5rem;
  border-radius: .75rem;
  border: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  box-sizing: border-box;
  padding-left: 4.5rem
}
.img{
  position: absolute;
   left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 1.5rem;
  height: 1.5rem;
}
#xian{
  width: .15rem;
  height: 1.4rem;
  border-right: 1px solid gray;
  position: absolute;
  top: 50%;
  left: 3.5rem;
  transform: translateY(-50%);
  z-index: 55;
}
.icon-0yuankanjia{
  position: absolute;
  top: 50%;
  left: 4.5rem;
  transform: translate(-50%,-50%);
  z-index: 666;
  color: black;
  font-size: 1rem;
  
}
</style>